iT邦幫忙

2021 iThome 鐵人賽
DAY 15
0
Software Development

Laravel 新手初見 API系列 第 15 篇

Day15-Webhook 實作（四）LINEBot 之 MessageBuilder（II）

13th鐵人賽 laravel line bot imagemap message template message
1865 瀏覽

  • 分享至 

  • xImage
    •  

大家好～
今天來實作 Imagemap message 與 Template message 吧！

Imagemap message

use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot;
use LINE\LINEBot\MessageBuilder\ImagemapMessageBuilder;
use LINE\LINEBot\MessageBuilder\Imagemap\BaseSizeBuilder;
use LINE\LINEBot\ImagemapActionBuilder\AreaBuilder;
use LINE\LINEBot\ImagemapActionBuilder\ImagemapMessageActionBuilder;
use LINE\LINEBot\ImagemapActionBuilder\ImagemapUriActionBuilder;
use LINE\LINEBot\MessageBuilder\Imagemap\VideoBuilder;
use LINE\LINEBot\MessageBuilder\Imagemap\ExternalLinkBuilder;

public function reply(Request $request)
{
    $httpClient = new CurlHTTPClient(env('LINE_BOT_CHANNEL_ACCESS_TOKEN'));
    $bot = new LINEBot($httpClient, ['channelSecret' => env('LINE_BOT_CHANNEL_SECRET')]);
    $replyToken = $request['events'][0]['replyToken'];

    $videoArea = new AreaBuilder(0, 0, 1040, 780);
    $externalLinkBuilder = new ExternalLinkBuilder(
        'https://img-9gag-fun.9cache.com/photo/aQowgv2_460svav1.mp4',
        'Label!'
    );
    $videoBuilder = new VideoBuilder(
        'https://img-9gag-fun.9cache.com/photo/aQowgv2_460svav1.mp4',
        'https://img-9gag-fun.9cache.com/photo/aP3Nxwg_700bwp.png',
        $videoArea,
        $externalLinkBuilder
    );

    $messageActionArea = new AreaBuilder(520, 780, 520, 260);
    $imagemapMessageActionBuilder = new ImagemapMessageActionBuilder(
        'imagemapMessageActionBuilder1',
        $messageActionArea
    );

    $uriActionArea = new AreaBuilder(0, 780, 520, 260);
    $imagemapUriActionBuilder = new ImagemapUriActionBuilder(
        'https://ithelp.ithome.com.tw/',
        $uriActionArea
    );


    $baseSizeBuilder = new BaseSizeBuilder(1040,1040);
    $imagemap = new ImagemapMessageBuilder(
        'https://6cf8-2001-b400-e7ac-2d2e-4c5c-37fc-485a-fd5a.ngrok.io/storage/Imagemap',
        'This is an imagemap',
        $baseSizeBuilder,
        [
            $imagemapMessageActionBuilder,
            $imagemapUriActionBuilder
        ],
        null,
        $videoBuilder
    );

    $bot->replyMessage($replyToken, $imagemap);
}

Imagemap 使用的背板圖片必須滿足以下要求：

  • 圖片格式：JPEG 或 PNG
  • 圖片寬度：240px、300px、460px、700px、1040px
    • 請準備好這五種解析度的圖片並把副檔名移除喔～
  • 檔案容量限制：10 MB

VideoBuilder

  • originalContentUrl
    • Max length: No limit
    • Max file size: 200 MB
    • 格式限制：mp4
  • previewImageUrl
    • Max image size: No limits
    • Max file size: 1 MB
    • 格式限制：JPEG or PNG
  • externalLink
    • 使用者點擊 label 時會用 Line 預設的瀏覽器開啟指定的 URI。

ImagemapMessageActionBuilder

  • 使用者點擊後會傳送設置好的文字訊息

ImagemapUriActionBuilder

  • 使用者點擊後會用 Line 預設的瀏覽器開啟指定的 URI。

成果預覽：

背板圖片有點跑版了ＱＱ
不過 Imagemap 有的功能上面的範例基本上都有實作到囉～

Template message

Template message 有提供四種模板：

  • Buttons template
  • Confirm template
  • Carousel template
  • Image carousel template

七種 Action：

  • Postback action
  • Message action
  • URI action
  • Datetime picker action
  • Camera action
  • Camera roll action
  • Location action

Buttons template

use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\ButtonTemplateBuilder;
use LINE\LINEBot\TemplateActionBuilder\CameraRollTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\CameraTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\DatetimePickerTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\LocationTemplateActionBuilder;

public function reply(Request $request)
{
    $httpClient = new CurlHTTPClient(env('LINE_BOT_CHANNEL_ACCESS_TOKEN'));
    $bot = new LINEBot($httpClient, ['channelSecret' => env('LINE_BOT_CHANNEL_SECRET')]);
    $replyToken = $request['events'][0]['replyToken'];
    
    $cameraRollTemplateActionBuilder = new CameraRollTemplateActionBuilder('CameraRoll');
    
    $cameraTemplateActionBuilder = new CameraTemplateActionBuilder('CameraTemplate');
    
    $datetimePickerTemplateActionBuilder = new DatetimePickerTemplateActionBuilder(
        'DatetimePicker',
        'storeId=12345',
        'datetime',
        Carbon::now()->format('Y-m-d\th:i'),
        '2099-12-31t00:00',
        '1900-01-01t00:00'
    );
    
    $locationTemplateActionBuilder = new LocationTemplateActionBuilder('LocationTemplate');

    $buttonTemplateBuilder = new ButtonTemplateBuilder(
        'Test Title',
        'Test Text',
        'https://cdn-icons-png.flaticon.com/512/1581/1581884.png',
        [
            $cameraRollTemplateActionBuilder,
            $cameraTemplateActionBuilder,
            $datetimePickerTemplateActionBuilder,
            $locationTemplateActionBuilder
        ]
    );

    $templateMessageBuilder = new TemplateMessageBuilder(
        'This is a buttons template',
        $buttonTemplateBuilder
    );

    $bot->replyMessage($replyToken, $templateMessageBuilder);
}

Buttons template 最多可以使用四種 TemplateActionBuilder，
這個範例使用了以下四種：

  • Camera roll action
    • 使用者觸發後，會開啟 Line 的 Camera roll
  • Camera action
    • 使用者觸發後，會開啟 Line 的 Camera
  • Datetime picker action
    • 使用者觸發後，會出現一個 Datetime picker 供使用者選擇日期。使用者傳送後我們收到的 Request 如下圖：
  • Location action
    • 使用者觸發後，會開啟 Line 的位置資訊功能。使用者傳送後我們收到的 Request 如下圖：

成果預覽：

Confirm template

use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot;
use LINE\LINEBot\MessageBuilder\TemplateMessageBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\ConfirmTemplateBuilder;
use LINE\LINEBot\TemplateActionBuilder\MessageTemplateActionBuilder;

public function reply(Request $request)
{
    $httpClient = new CurlHTTPClient(env('LINE_BOT_CHANNEL_ACCESS_TOKEN'));
    $bot = new LINEBot($httpClient, ['channelSecret' => env('LINE_BOT_CHANNEL_SECRET')]);
    $replyToken = $request['events'][0]['replyToken'];

    $messageTemplateActionBuilder1 = new MessageTemplateActionBuilder(
        'YES',
        'Say Yes!'
    );

    $messageTemplateActionBuilder2 = new MessageTemplateActionBuilder(
        'NO',
        'Say No!'
    );

    $confirmTemplateBuilder = new ConfirmTemplateBuilder(
        'YES or NO',
        [
            $messageTemplateActionBuilder1,
            $messageTemplateActionBuilder2
        ]
    );

    $templateMessageBuilder = new TemplateMessageBuilder(
        'This is a buttons template',
        $confirmTemplateBuilder
    );

    $bot->replyMessage($replyToken, $templateMessageBuilder);
}

Confirm template 會傳送一個固定有兩個按鈕的模板，
然後這邊我們實作的是 Message action，
所以使用者點擊按鈕後會回傳一段文字訊息給我喔～

成果預覽：

Carousel template

use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot;
use LINE\LINEBot\MessageBuilder\TemplateMessageBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\CarouselTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\CarouselColumnTemplateBuilder;
use LINE\LINEBot\TemplateActionBuilder\PostbackTemplateActionBuilder;

public function reply(Request $request)
{
    $httpClient = new CurlHTTPClient(env('LINE_BOT_CHANNEL_ACCESS_TOKEN'));
    $bot = new LINEBot($httpClient, ['channelSecret' => env('LINE_BOT_CHANNEL_SECRET')]);
    $replyToken = $request['events'][0]['replyToken'];

    $postbackTemplateActionBuilder1 = new PostbackTemplateActionBuilder(
        'Postback 1',
        'storeId=12345',
        'Postback 1'
    );

    $carouselColumnTemplateBuilder1 = new CarouselColumnTemplateBuilder(
        'Title 1',
        'CarouselColumnTemplateBuilder 1',
        'https://cdn-icons-png.flaticon.com/512/3522/3522248.png',
        [
            $postbackTemplateActionBuilder1
        ]
    );

    $postbackTemplateActionBuilder2 = new PostbackTemplateActionBuilder(
        'Postback 2',
        'storeId=67890',
        'Postback 2'
    );

    $carouselColumnTemplateBuilder2 = new CarouselColumnTemplateBuilder(
        'Title 2',
        'CarouselColumnTemplateBuilder 2',
        'https://cdn-icons-png.flaticon.com/512/3522/3522266.png',
        [
            $postbackTemplateActionBuilder2
        ]
    );

    $carouselTemplateBuilder = new CarouselTemplateBuilder([
        $carouselColumnTemplateBuilder1,
        $carouselColumnTemplateBuilder2
    ]);

    $templateMessageBuilder = new TemplateMessageBuilder(
        'This is a buttons template',
        $carouselTemplateBuilder
    );

    $bot->replyMessage($replyToken, $templateMessageBuilder);
}

Carousel template

  • Max columns: 10

每個 columns 最多可以有三個 Action。
這邊範例我們使用的是 Postback action，
使用者觸發後，
回傳的訊息屬於 Postback event，
如下圖：

成果預覽：

Image carousel template

use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot;
use LINE\LINEBot\MessageBuilder\TemplateMessageBuilder;


public function reply(Request $request)
{
    $httpClient = new CurlHTTPClient(env('LINE_BOT_CHANNEL_ACCESS_TOKEN'));
    $bot = new LINEBot($httpClient, ['channelSecret' => env('LINE_BOT_CHANNEL_SECRET')]);
    $replyToken = $request['events'][0]['replyToken'];

    $uriTemplateActionBuilder1 = new UriTemplateActionBuilder(
        'Label 1',
        'https://ithelp.ithome.com.tw/'
    );

    $imageCarouselColumnTemplateBuilder1 = new ImageCarouselColumnTemplateBuilder(
        'https://cdn-icons-png.flaticon.com/512/3522/3522248.png',
        $uriTemplateActionBuilder1
    );

    $uriTemplateActionBuilder2 = new UriTemplateActionBuilder(
        'Label 2',
        'https://developers.line.biz/en/'
    );

    $imageCarouselColumnTemplateBuilder2 = new ImageCarouselColumnTemplateBuilder(
        'https://cdn-icons-png.flaticon.com/512/3522/3522266.png',
        $uriTemplateActionBuilder2
    );

    $imageCarouselTemplateBuilder = new ImageCarouselTemplateBuilder([
        $imageCarouselColumnTemplateBuilder1,
        $imageCarouselColumnTemplateBuilder2
    ]);

    $templateMessageBuilder = new TemplateMessageBuilder(
        'This is a buttons template',
        $imageCarouselTemplateBuilder
    );

    $bot->replyMessage($replyToken, $templateMessageBuilder);
}

Image carousel template

  • Max columns: 10

每個 columns 只能有一個 Action。
這邊範例我們使用的是 URI action，
使用者觸發後，
會用 Line 預設的瀏覽器開啟指定的 URI。

成果預覽：

今天就這樣啦～
還剩下一種 Flex Message 還沒實作到，
明天再繼續吧～
大家明天見！
若文章有任何問題，
還請大家不吝賜教！


上一篇
Day14-Webhook 實作（三）LINEBot 之 MessageBuilder（I）
下一篇
Day16-Webhook 實作（五）LINEBot 之 MessageBuilder（III）
系列文
Laravel 新手初見 API 共 30 篇
  1. 26
    Day26-介接 API（番外篇 I）NLP 自然語言處理之初見 Dialogflow ES
  2. 27
    Day27-介接 API（番外篇 II）Dialogflow ES 之 Intents 與 Entities
  3. 28
    Day28-介接 API（番外篇 III）Dialogflow ES 之 Fulfillment 與 Events
  4. 29
    Day29-介接 API（四）Laravel 實作 Dialogflow ES 之 API interactions
  5. 30
    Day30-用 LINEBot、Google Calendar、Dialogflow ES 做個開會機器人當結尾！
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙